﻿@page "/numeric"
@page "/docs/guides/components/numeric.html"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Numeric
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Demonstration and configuration of the Radzen Blazor <strong>Numeric</strong> component.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    These demos showcase a numeric input with two-way data binding, min/max value constraints, configurable step increments and placeholders, optional up/down buttons, formatted value display with culture-specific formats, text alignment options, custom value conversion, and support for custom numeric types with <code>TypeConverter</code> or <code>IFormattable</code> implementations.
</RadzenText>

<RadzenText Anchor="numeric#get-set-value" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Get and Set the value of Numeric
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    As all Radzen Blazor input components the <strong>Numeric</strong> has a Value property which gets and sets the value of the component. Use <code>@@bind-Value</code> to get the user input.
</RadzenText>
<RadzenExample ComponentName="Numeric" Example="NumericBindValue">
    <NumericBindValue />
</RadzenExample>

<RadzenText Anchor="numeric#value-and-change-event" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Get and Set the value of Numeric using Value and Change event
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Value property can be used to set the value of the component and <code>Change</code> event to get the user input.
</RadzenText>
<RadzenExample ComponentName="Numeric" Example="NumericChangeEvent">
    <NumericChangeEvent />
</RadzenExample>

<RadzenText Anchor="numeric#min-max" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Min set to 1 and Max set to 10
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>Min</code> and <code>Max</code> properties to constrain numeric input within a specific range.
</RadzenText>
<RadzenExample ComponentName="Numeric" Example="NumericMinMax">
    <NumericMinMax />
</RadzenExample>

<RadzenText Anchor="numeric#placeholder-and-step" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Placeholder and 0.5 step
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>Placeholder</code> property to display hint text and <code>Step</code> to define increment/decrement intervals.
</RadzenText>
<RadzenExample ComponentName="Numeric" Example="NumericPlaceholderAndStep">
    <NumericPlaceholderAndStep />
</RadzenExample>

<RadzenText Anchor="numeric#without-up-down" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Without Up/Down
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>ShowUpDown="false"</code> to hide the increment/decrement buttons and display only the text input.
</RadzenText>
<RadzenExample ComponentName="Numeric" Example="NumericWithoutUpDown">
    <NumericWithoutUpDown />
</RadzenExample>

<RadzenText Anchor="numeric#formatted-value" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Formatted value
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>Format</code> property to apply culture-specific number formatting to the displayed value.
</RadzenText>
<RadzenExample ComponentName="Numeric" Example="NumericFormattedValue">
    <NumericFormattedValue />
</RadzenExample>

<RadzenText Anchor="numeric#align-value" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Align value
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>InputAttributes</code> property to customize text alignment and other HTML input attributes.
</RadzenText>
<RadzenExample ComponentName="Numeric" Example="NumericAlign">
    <NumericAlign />
</RadzenExample>

<RadzenText Anchor="numeric#custom-value-convert" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Custom Value convert
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>ConvertValue</code> property to implement custom value conversion logic for specialized numeric types.
</RadzenText>
<RadzenExample ComponentName="Numeric" Example="NumericConvertValue">
    <NumericConvertValue />
</RadzenExample>

<RadzenText Anchor="numeric#custom-numeric-type" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Custom Numeric Type Support
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Types that can be converted from a string, via a <code>TypeConverter</code> or assigning <code>ConvertValue</code>, get basic support from <strong>Numeric</strong>.  If the type implements a TypeConverter that can convert to/from decimal, then <code>Step</code> and <code>Min</code>/<code>Max</code> are supported.  If the type implements <code>IFormattable</code>, <code>Format</code> strings will be passed to it.
</RadzenText>
<RadzenExample ComponentName="Numeric" Example="NumericCustomType">
    <NumericCustomType />
</RadzenExample>

<RadzenText Anchor="numeric#keyboard-navigation" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Keyboard Navigation
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor Numeric component.
</RadzenText>

<KeyboardNavigationDataGrid Data="@shortcuts" />

@code {
    public List<KeyboardShortcut> shortcuts = new()
    {
        new KeyboardShortcut { Key = "Tab", Action = "Navigate to a Numeric component." },
        new KeyboardShortcut { Key = "UpArrow in a focused Numeric", Action = "Increase the Numeric value with the Step configured." },
        new KeyboardShortcut { Key = "DownArrow in a focused Numeric", Action = "Decrease the Numeric value with the Step configured." }
    };
}
